<script setup lang="ts" name="PopSelect">
const { t } = useI18n();
const emits = defineEmits(["onConfirmSelect", "update:showPicker"]);
const props = defineProps({
  title: {
    type: String,
    default: null,
  },
  showPicker: {
    type: Boolean,
    default: false,
  },
  curentId: {
    type: Number,
    default: null,
  },
  columns: {
    required: true,
    type: Array<any>,
  },
});
const data: any = reactive({
  selectItemId: "",
});
const { selectItemId } = toRefs(data);
const onConfirm = ({ selectedOptions }:any) => {
  emits("onConfirmSelect", selectedOptions);
  //   showPicker.value = false;
  //   console.log(selectedOptions, 'selectedOptions');
};
</script>

<template>
  <div class="popSelectContainer">
    <van-popup v-model:show="props.showPicker" round position="bottom"
    @click-overlay="emits('update:showPicker', false)">
      <van-picker
        :columns="columns"
        @confirm="onConfirm"
        :title="title || t('result.test12')"
        @cancel="emits('update:showPicker', false)"
      >
        <template #option="scope">
          <div class="selectItem">
            <div
              class="normalData"
              :class="{ active: scope.value === props.curentId }"
            >
              {{ scope.text }}
            </div>
            <Iconfont
              v-if="scope.value === props.curentId"
              name="icon-icon_gou"
              color="#FF2D55"
              size="16"
              class="choosedData"
            />
          </div>
        </template>
      </van-picker>
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
.popSelectContainer {
  .selectItem {
    display: flex;
    align-items: center;
    justify-content: center;
    .normalData {
      color: #343c4b;
      border-radius: 30rem;
      font-family: Inter;
      font-size: 14rem;
      background: linear-gradient(
        90deg,
        #fff 9.71%,
        #f5f5f5 22.46%,
        #f5f5f5 73.89%,
        #fff 92.35%
      );
    }
    .active {
      color: #ff2d55;
    }
    .choosedData {
      margin-left: 12rem;
    }
  }
}
</style>
